<template>
  <div>
    <el-row :gutter="12" style="margin:20px 14px;">
      <el-col :span="8" class="box1">
        <el-card shadow="hover">
          <div class="gun">
            <div class="gunzi"></div>
            通讯状态
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="bg">
              <div>
                <div style="margin:15px;font-size: 14px;color: #BCFFFF;">在线数量</div>
                <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ onelineQuantity }}</div>
              </div>
              <div style="display: flex;flex-direction: column-reverse;">
                <img src="@/assets/image/card2.png" alt="">
              </div>
            </div>
            <div class="bg">
              <div>
                <div style="margin:15px;font-size: 14px;color: #BCFFFF;">离线数量</div>
                <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ offlineNumber }}</div>
              </div>
              <div style="display: flex;flex-direction: column-reverse;">
                <img src="@/assets/image/card2.png" alt="">
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" class="box2">
        <el-card shadow="hover">
          <div class="gun">
            <div class="gunzi"></div>
            实时总功率
          </div>
          <div class="bg">
            <div>
              <div style="margin:15px;font-size: 14px;color: #9BCCEC;">充电总功率</div>
              <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ faultNumber }}</div>
            </div>
            <div style="display: flex;flex-direction: column-reverse;">
              <img src="@/assets/image/card1.png" alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="5" class="box2">
        <el-card shadow="hover">
          <div style="display: flex;">
          <div style="flex: 1;">
            <div class="gun">
              <div class="gunzi"></div>
              实时总功率
            </div>
            <div class="bg">
              <div>
                <div style="margin:15px;font-size: 14px;color: #9BCCEC;">在线数量</div>
                <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ powerSum }}W</div>
              </div>
              <div style="display: flex;flex-direction: column-reverse;">
                <img src="@/assets/image/card1.png" alt="">
              </div>
            </div>
          </div>
          <div style="flex: 1;">
              <div class="gun">
                <div class="gunzi"></div>
                实时总功率
              </div>
              <div class="bg">
                <div>
                  <div style="margin:15px;font-size: 14px;color: #9BCCEC;">在线数量</div>
                  <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">98W</div>
                </div>
                <div style="display: flex;flex-direction: column-reverse;">
                  <img src="@/assets/image/card1.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col> -->
      <el-col :span="4" class="box3">
        <el-card shadow="hover">
          <div class="gun">
            <div class="gunzi"></div>
            故障状态数量
          </div>
          <div class="bg">
            <div>
              <div style="margin:15px;font-size: 14px;color: #9BCCEC;">故障数量</div>
              <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ faultNumber }}</div>
            </div>
            <div style="display: flex;flex-direction: column-reverse;">
              <img src="@/assets/image/card4.png" alt="">
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8" class="box4">
        <el-card shadow="hover">
          <div class="gun">
            <div class="gunzi"></div>
            充电状态
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div class="bg">
              <div>
                <div style="margin:15px;font-size: 14px;color: #BCFFFF;">充电中</div>
                <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ ChargingNumber }}</div>
              </div>
              <div style="display: flex;flex-direction: column-reverse;">
                <img src="@/assets/image/card2.png" alt="">
              </div>
            </div>
            <div class="bg">
              <div>
                <div style="margin:15px;font-size: 14px;color: #BCFFFF;">空闲中</div>
                <div style="margin:15px;font-size: 26px;font-weight: bold;color: #FFFFFF;">{{ unchargedNumber }}</div>
              </div>
              <div style="display: flex;flex-direction: column-reverse;">
                <img src="@/assets/image/card2.png" alt="">
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagetable style="margin:20px 14px;" ref="pagetable" :data="allStationList" :current-page="allStationCurrentPage"
      :pageSize="allStationPageSize" :total="allStationTotal" @refresh-data="handleAllStationRefresh"
      @current-change="handleAllStationCurrentChange" @size-change="handleAllStationSizeChange">
      <el-table-column show-overflow-tooltip type="index" label="序号" center></el-table-column>
      <el-table-column :header-cell-style="{ fontSize: '16px' }" show-overflow-tooltip label="标识" prop="id" center
        class="text-biaoshi"></el-table-column>
      <el-table-column show-overflow-tooltip label="名称" prop="staName" center></el-table-column>
      <el-table-column show-overflow-tooltip label="地址" prop="addr" center></el-table-column>
      <el-table-column show-overflow-tooltip label="营业时间" prop="busHours" center></el-table-column>
      <el-table-column show-overflow-tooltip label="所属组织机构" prop="orgId" center></el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button @click="showPile(scope.row)" type="text" size="small">桩列表</el-button>
        </template>
      </el-table-column>
    </pagetable>
    <!-- 桩列表弹框 -->
    <el-dialog class="dia_power1" :visible.sync="pileMonitorShow" width="50%" title="桩列表详情" :close-on-click-modal="false"
      :modal-append-to-body="false">
      <pagetable ref="pagetable" :data="ChargeList" :current-page="ChargeCurrentPage" :pageSize="ChargePageSize"
        :total="ChargeTotal" @refresh-data="handlePileRefresh" @current-change="handlePileCurrentChange"
        @size-change="handlePileSizeChange">
        <el-table-column show-overflow-tooltip type="index" label="序号" width="100" center></el-table-column>
        <el-table-column :header-cell-style="{ fontSize: '16px' }" show-overflow-tooltip label="充电桩标识" prop="id" center
          class="text-biaoshi"></el-table-column>
        <el-table-column show-overflow-tooltip label="充电桩名称" prop="devName" center></el-table-column>
        <!-- <el-table-column show-overflow-tooltip label="所属区域" :formatter="getAreaName" prop="regId"
          center></el-table-column> -->
        <!-- <el-table-column show-overflow-tooltip label="型号名称" prop="modelName" center></el-table-column> -->
        <el-table-column show-overflow-tooltip label="额定功率" prop="ratePower" center></el-table-column>
      </pagetable>
    </el-dialog>
  </div>
</template>

<script>
import {
  findStationList, getPileList, communicationStatus
} from "@/api/carNetworkInteraction/index.js";
import pagetable from "@/components/pagetable";

export default {

  components: { pagetable },
  data() {
    return {
      allStationList: [],
      allStationTotal: 0,
      allStationPageSize: 20,
      allStationCurrentPage: 1,
      pileMonitorShow: false,
      pileId: '',
      ChargePageSize: 20,
      ChargeCurrentPage: 1,
      ChargeList: [],
      ChargeTotal: 0,
      onelineQuantity: 0,
      offlineNumber: 0,
      faultNumber: 0,
      ChargingNumber: 0,
      unchargedNumber: 0,
      powerSum: 0
    };
  },
  mounted() {
    this.handleAllStationRefresh()
    this.querycommunicationStatus()
  },
  computed: {
  },
  methods: {
    querycommunicationStatus() {
      communicationStatus().then(res => {
        if (res.code == 200) {
          this.onelineQuantity = res.result.communicationStatusOnlineSum
          this.offlineNumber = res.result.communicationStatusOfflineSum
          this.faultNumber = res.result.breakdownStatusYesSum
          this.ChargingNumber = res.result.chargingStatusYesSum
          this.unchargedNumber = res.result.chargingStatusFreeSum
          this.powerSum = res.result.powerSum
        }
      })
    },
    queryAllStationList() {
      findStationList({ pageSize: this.allStationPageSize, pageNo: this.allStationCurrentPage }).then(res => {
        if (res.code == 200) {
          this.allStationList = res.result.records;
          this.allStationTotal = res.result.total;
        }
      })
    },
    showPile(row) {
      this.pileId = row.id;
      this.ChargeCurrentPage = 1;
      this.ChargePageSize = 20;
      this.pileMonitorShow = true;
      this.queryPileList()
    },
    handleAllStationRefresh() {
      this.allStationCurrentPage = 1;
      this.allStationPageSize = 20;
      this.queryAllStationList();
    },
    handleAllStationSizeChange(val) {
      this.allStationPageSize = val;
      this.allStationCurrentPage = 1;
      this.queryAllStationList();
    },
    //分页点击
    handleAllStationCurrentChange(val) {
      this.allStationCurrentPage = val;
      this.queryAllStationList();
    },
    queryPileList() {
      getPileList({ staId: this.pileId, pageSize: this.ChargePageSize, pageNo: this.ChargeCurrentPage }).then(res => {
        if (res.code == 200) {
          this.ChargeList = res.result.records;
          this.ChargeTotal = res.result.total;
        }
      })
    },
    handlePileRefresh() {
      this.ChargeCurrentPage = 1;
      this.ChargePageSize = 20;
      this.queryPileList();
    },
    handlePileSizeChange(val) {
      this.ChargePageSize = val;
      this.ChargeCurrentPage = 1;
      this.queryPileList();
    },
    //分页点击
    handlePileCurrentChange(val) {
      this.ChargeCurrentPage = val;
      this.queryPileList();
    },
  }
};
</script>

<style lang="scss" scoped>
.box1 {
  .gun {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333333;

    .gunzi {
      margin-right: 10px;
      width: 6px;
      height: 19px;
      background: linear-gradient(180deg, #009999 0%, #FFFFFF 100%);
    }
  }

  .bg {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    width: 45%;
    margin: 30px 0;
    background: url('~@/assets/image/bg_card1.png');
    background-size: 100% 100%;
  }
}

.box2 {
  .gun {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333333;

    .gunzi {
      margin-right: 10px;
      width: 6px;
      height: 19px;
      background: linear-gradient(180deg, #4C7AF4 0%, #FFFFFF 100%);
    }
  }

  .bg {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    width: 100%;
    margin: 30px 0;
    background: url('~@/assets/image/bg_card2.png');
    background-size: 100% 100%;
  }
}

.box3 {
  .gun {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333333;

    .gunzi {
      margin-right: 10px;
      width: 6px;
      height: 19px;
      background: linear-gradient(180deg, #F76973 0%, #FFFFFF 100%);
    }
  }

  .bg {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    margin: 30px 0;
    background: url('~@/assets/image/bg_card3.png');
    background-size: 100% 100%;
  }
}

.box4 {
  .gun {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #333333;

    .gunzi {
      margin-right: 10px;
      width: 6px;
      height: 19px;
      background: linear-gradient(180deg, #1DED8D 0%, #FFFFFF 100%);
    }
  }

  .bg {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    margin: 30px 0;
    width: 45%;
    background: url('~@/assets/image/bg_card4.png');
    background-size: 100% 100%;
  }
}
</style>
